<template>
  <div class="flexCenter2" style="height:100vh">
    <div class="pageContent">
      <div class="logo">
        <div style="margin-bottom:20px">
          <!-- <img src="@/assets/img/loginLogo.png" alt /> -->
        </div>
        <div style="font-size:28px;font-weight:600;margin-bottom:25px;position:relative">工地云课堂
          <div class="rightType">管理台</div>
        </div>
        <div style="color:#999;margin-bottom:20px">面向工程建设领域的在线教育学习平台</div>
      </div>
      <div style="margin-bottom:30px">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-form-model-item ref="phoneNum" prop="phoneNum">
            <a-input v-model="form.phoneNum" placeholder="手机号" size="large">
              <a-icon slot="prefix" type="mobile" style="color:#ccc" />
            </a-input>
          </a-form-model-item>
        </a-form-model>
        <a-form-model ref="ruleForm2" :model="form" :rules="rules">
          <a-form-model-item ref="verification" prop="verification">
            <a-input
              v-model="form.verification"
              placeholder="验证码"
              style="width:65%;margin-right:5%"
              size="large"
            >
              <a-icon slot="prefix" type="mail" style="color:#ccc" />
            </a-input>
            <!-- <a-button style="width:30%" @click="onValid">发送验证码</a-button> -->
            <a-button v-if="!isGain" @click="outTime" style="width:30%;" size="large">发送验证码</a-button>
            <a-button v-if="isGain" disabled style="width:30%;" size="large">{{countDown}}s</a-button>
          </a-form-model-item>
        </a-form-model>
        <a-button type="danger" style="width:100%" @click="onLogin">登录</a-button>
      </div>
      <div class="Copyright">Copyright © 2021 南京飞搏智能交通</div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import { validCode, authLogin } from '@/api/login.js'
import { mapState } from 'vuex'
import { log } from 'util'
export default {
  data() {
    return {
      form: {
        phoneNum: '',
        verification: ''
      },
      countDown: 60,
      isGain: false,
      timer: '',
      rules: {
        phoneNum: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change'
          }
        ],
        verification: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }
        ]
      },
      yzmflag: false
    }
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations(['SET_SPACE']),
    // 验证码
    onValid() {
      let data = {
        userName: this.form.phoneNum
      }
      validCode(data).then((res) => {
        this.yzmflag = true
        if (this.yzmflag == true) {
            this.countDown = 60
            this.isGain = true

            this.timer = setInterval(() => {
              this.countDown = this.countDown - 1

              if (this.countDown <= 0) {
                this.isGain = false
                clearInterval(this.timer)
              }
            }, 1000)
          }
        this.$message.success('验证码已发送，请查收')
      })
    },
    // 点击获取验证码
    outTime() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.onValid()

        } else {
          return false
        }
      })
    },
    // 登录
    onLogin() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          let data = {
            cellphone: this.form.phoneNum,
            code: this.form.verification
          }
          authLogin(data).then((res) => {
            const result = res.data.data;
            localStorage.setItem('sessionId',res.data.data.sessionId);
            localStorage.setItem('sysType',res.data.data.sysType);
            localStorage.setItem('spaceInfo',JSON.stringify(res.data.data.spaceInfoList[0]));

            // this.SET_SPACEINFO = ({
            //   used: result.spaceInfoList[0].usedSpace,
            //   total: result.spaceInfoList[0].totalSpace
            // })
            const space = {
              used: result.spaceInfoList[0].usedSpace,
              total: result.spaceInfoList[0].totalSpace
            }
            localStorage.setItem('space', JSON.stringify(space));

            this.getUserInfo(res.data.data);
            this.$message.success('登录成功')
            if (localStorage.getItem('sysType') == '1') {
              this.$router.push({ path: '/projectService/projectServicePage' });
            }else {
              this.$router.push({ path: '/columnManage/columnList' });
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.pageContent {
  width: 400px;
  /* height: 570px; */
  margin: 0 auto;
  padding-top: 0;
  background: #f0f2f5;
}
.logo {
  text-align: center;
}
.Copyright {
  color: #999;
  text-align: center;
}
::v-deep .ant-btn-lg {
  font-size: 13px;
}
::v-deep .ant-input-lg {
  font-size: 13px;
}
::v-deep .ant-input{
  border-radius: 0;
}
::v-deep .ant-btn{
   border-radius: 0;
}
.rightType{
  width: 60px;
  height: 20px;
  border-radius: 10px;
  background: #1890ff;
  color: #fff;
  position: absolute;
  right: 10%;
  top: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
}
</style>
